<template>
	<view class="page-login-box">
		<view class="page-login-sidebox">
			<view class="login-logo">
				<!--<image src="@/static/images/logo.png" mode="scaleToFill"></image>-->
			</view>
			<view class="login-cards">
				<uni-card>
					<view class="login-title fwb col0">欢迎使用</view>
					<view class="login-subtitle">要继续，请输入您的账户密码</view>
					<view class="mrgt20 mrgb20">
						<uni-easyinput prefixIcon="person" :input-border="false" v-model="loginData.userName" 
							placeholder="输入您的账号" placeholder-style="font-size: 13px;"></uni-easyinput>
					</view>
					<view class="">
						<uni-easyinput prefixIcon="locked" :input-border="false" v-model="loginData.password" 
							type="password" placeholder="输入您的密码" placeholder-style="font-size: 13px;"></uni-easyinput>
					</view>
					<view v-if="!isWechatBrowser">
						<view class="mrgt15">
							<view class="fl mrgt5">
								<u-checkbox-group placement="row">
									<u-checkbox :checked="loginData.useCookie" @change="loginData.useCookie = !loginData.useCookie"
										label="记住密码" activeColor="#1dcd9e"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="fr fwb f14 mrgt2" style="color: #000000;" @click="_forget()">忘记密码?</view>
							<view class="clearb"></view>
						</view>
						<view class="mrgt30"><!--v-if="!isWechatBrowser"-->
							<u-button class="loginbtn" text="现在登录" color="#02bfa9" @click="_submit()"></u-button>
						</view>
						<view class="loginexp" @click="_explogin()">体验电站</view>
					</view>
					<view class="mrgt20" v-else></view>
					<view class="mrgt10" v-if="isWechatBrowser">
						<u-button class="loginbtn" text="微信登录" color="#229d01" @click="getWchatCode()"></u-button>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pageLogin",
		data() {
			return {
				isWechatBrowser: false,
				loginData: {
				  "tenancyName": "",
				  "userName": "",
				  "password": "",
				  "useCookie": false,
				  "provider": null,
				  "providerKey": ""
				},
				loginWechat: {
				  "provider": null,
				  "accessCode": ""
				}
			}
		},
		async onLoad(e) {
			await this.$onLaunched
			// 判断是否微信浏览器
			this.isWechatBrowser = this.$tools.getBrowser().wechat || false
			// 获取微信回跳带的参数
			let params = this.$tools.getRequest()
			// 微信授权登录回调url后获取的参数
			if (params && params.code) {
				this.loginWechat.accessCode = params.code
				this.loginWechat.provider = this.valWechatMP()
				this._login()
			} else {
				// 进入登录界面将token设为空
				this.logout()
			}
			if (this.isWechatBrowser) {
				// this.getWchatCode()
			}
		},
		methods: {
			_login() {
				this.mxShowLoading()
				setTimeout(() => {
					this.mxHideLoading()
					this.mxReLaunch("/pages/index/index")
				}, 2500)
			},
			// 获取微信公众号的code
			getWchatCode() {
				this._login()
			},
			// 直接帐号登录时提交
			_submit() {
				if (!this.loginData.userName) {
					this.mxToast("请输入帐号!")
					return false
				} else if (!/^.{4,20}$/.test(this.loginData.password)) {
					this.mxToast('密码为4-20位字符!', { time: 2500 })
					return false
				}
				this._login()
			},
			_explogin() {
				this._login()
			},
			_forget() {
				this.mxToast('请联系管理员重置密码!', { time: 3000 })
			}
		}
	};
	</script>

<style scoped lang="scss">
	.page-login-box {
		height: 100%;
	}
	.page-login-sidebox {
		overflow: hidden;
		padding: 0 15px;
		height: 100%;
		/* #ifdef MP-WEIXIN */
		/* background-image: linear-gradient(0deg, #179fc4, #1cbbb4); */
		/* #endif */
		background-size: auto 100%;
		.login-logo {
			margin: 100px auto 10px;
			width: 574px;
			height: 61px;
			transform: scale(0.7);
			image {
				width: 100%;
				height: 100%;
			}
		}
		/deep/ .login-cards {
			.login-title {
				font-size: 26px;
				font-family: "黑体";
			}
			.login-subtitle {
				margin: 30rpx 0;
				color: #999;
				font-size: $uni-font-size-base;
			}
			.uni-card {
				margin: 0 !important;
				padding: 10px 10px !important;
				border-radius: 10px;
				border: 0 !important;
				box-shadow: none !important;
			}
			.uni-easyinput__content {
				border-radius: 8px;
				padding: 10px 0;
				background: #f4faf8;
				.uniui-person, .uniui-locked {
					margin: 0 10rpx;
					font-size: 22px !important;
					font-weight: bold !important;
					color: #02bfa9 !important;
				}
				.uni-easyinput__content-input {
					font-size: 14px !important;
				}
			}
			.u-button--square {
				border-radius: 8px !important;
				height: 46px !important;
			}
			.loginexp {
				margin-top: 20rpx;
				color: #02bfa9;
				text-align: center;
			}
		}
	}
	@media screen and (max-width: 640px) {
	    .page-login-sidebox {
	        .login-logo {
				margin: 160rpx auto 10px;
				width: 574rpx;
				height: 61rpx;
				transform: scale(1.1);
				image {
					width: 100%;
					height: 100%;
				}
			}
			.login-cards {
				margin: 16% auto 0;
				width: 320px;
			}
	    }
	}
	@media screen and (min-width: 640px) {
		.page-login-sidebox {
			.login-logo {
				margin-right: 850px;
			}
			.login-cards {
				margin: 100px 240px 0 auto;
				width: 400px;
			}
		}
	}
</style>
